<template>
  <view class="composite">
  
    <!-- <view class="u-m-t-10">
      <view class="u-flex u-flex-wrap select-box">
        <view
          class="u-flex-1 u-flex u-col-center u-row-center select-box-item"
          v-for="(item, index) in todayList"
          :class="current === index ? 'active' : ''"
          :key="index"
          @click="selectItem(index)"
        >
          <view class="u-m-t-4" v-if="!item.label">{{ item.value }}</view>
          <view v-else>{{ item.label }}</view>
        </view>
      </view>
    </view> -->
    <uni-notice-bar
      show-icon
      scrollable
      text="每天凌晨0点-6点为统计时间，请6点后查看当日数据。"
    />
    <view class="card">
      <view class="card-title">
        <view class="card-title-left">
          <image
            src="../../../static/images/zs_icon.png"
            mode="widthFix"
            style="width: 32rpx; height: 32rpx; margin-right: 12rpx"
          ></image
          >订单/收益统计</view
        >
        <!-- <view>订单</view> -->
      </view>
      <view class="card-body">
        <view
          class="card-body-item"
          v-for="(item, index) in orderStatistics"
          :key="index"
        >
          <view>{{ item.name }}</view>
          <view
            class="u-m-t-10"
            style="font-weight: bold; font-size: 28rpx; color: #333"
            >{{ item.value || "0" }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

// 定义 props 接口（根据业务需要可补充更多属性）
interface UserInfo {
  deviceIncomeTotal: number;
  deviceIncomeYesterday: number;
  // 如果还有其他字段，可以继续添加
}

interface OrderStatistic {
  name: string;
  value: number | string;
}

// 定义 props，注意默认值问题，如果没有传入，则 userInfo 默认值为空对象
const props = defineProps<{
  userInfo: UserInfo;
  orderStatistics: OrderStatistic[];
}>();

// 定义组件内部状态
const todayList = ref<any[]>([]);
const current = ref(0);

// 选择 tab 项方法
const selectItem = (index: number) => {
  current.value = index;
};


</script>
<style lang="scss" scoped>
.composite {
  width: 100%;
  height: 100vh;
  // background-color: #f5f5f5;

  .select-box {
    width: 100%;
    // background-color: #fff;
    gap: 32rpx;
    padding: 20rpx;
    .select-box-item {
      border: 1rpx solid #ff9900;
      background-color: #fff;
      border-radius: 24rpx;
      color: #ff9900;
      height: 48rpx;
    }
    .active {
      color: #fff;
      background-color: #ff9900;
    }
  }
  .card {
    background-color: #fff;
    width: calc(100% - 40rpx);
    margin: 24rpx auto;
    border-radius: 16rpx;
    overflow: hidden;

    .card-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: #333;
      padding: 20rpx;
      background-color: #fff;
      .card-title-left {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
    }
    .card-body {
      display: flex;
      flex-wrap: wrap;
      .card-body-item {
        width: 25%;
        padding: 20rpx;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}
</style>
